<template>
	<view>
		<view class="topbar">
			<view class="dhl"></view>
			<view class="tab dis_f_c_c">
				<view style="width: 344rpx;">
					<u-tabs item-width="55" bg-color="none" :active-item-style="tabstyle" :list="list"   height="88" active-color="#222222" bar-width="40"  bar-height="6" inactive-color="#fff" :is-scroll="false" :current="current" @change="change"></u-tabs>
				</view>
			</view>
			<image class="xfj" src="../../static/xuan_shang/xfj.png" mode="" @click="gofabu()"></image>
			<view class="s_banxin dis_f_c_c">
				<view class="search dis_f_l_c">
					<image src="../../static/icon/search.png" mode=""></image>
					<u-input v-model="search_text" height="32" @input='serch'></u-input>
				</view>
			</view>
		</view>
		<view class="content dis_f_co">
			<view  v-if="part">
				<view class="dt_xq dis_f_co" v-for="(item,index) in quan" @click="go_xq(item.id)">
					<view class="dis_f_l_c" style="margin-bottom: 28rpx;">
						<view class="tx">
							<image class="tx_img" :src="item.user.avatar" mode=""></image>
							<image class="sex" :src="sex_src" mode=""></image>
						</view>
						<view class="dis_f_co">
							<view class="title">{{item.user.name}}</view>
							<view class="sign">{{item.user.sign}}</view>
						</view>
					</view>
					<view style="font-size: 22rpx;margin-bottom: 24rpx;" class="hh slh_three">{{item.content}}</view>
					<view class="dis_f_l_c dis_f_w img_list" >
						<image v-for="(items,indexs) in item.pic" :src="items" @click.stop="look_img(items,item.pic)" v-if="item.type ==0 ||item.type ==1"></image>
						<!-- <video v-if="item.type ==2"  style="border-radius: 20rpx;z-index: 1;" :autoplay="false" :src="item.pic[0]" :show-fullscreen-btn="true">
						</video> -->
						
						<!-- <image  :src="item.video_pic" mode="" @click.stop="previewVideo(item.pic[0])"></image> -->
						<view class="" v-if="item.type ==2">
							<!-- <video :autoplay="false" :src="previewVideoSrc" :show-fullscreen-btn="false" play-strategy="1">
								<cover-view class="preview-full-close" @click.stop="previewVideoClose"> ×
								</cover-view>
							</video> -->
							<j-video :url="item.pic[0]" :poster="item.video_pic" height="220px" width="500rpx"></j-video>
						</view>
					</view>
					<view class="dz_btn dis_f_l_c">
						<image class="left" src="../../static/icon/dw2.png" mode=""></image>
						<view style="margin-right: 18rpx;">{{item.city}}</view>
						<!-- <image class="right" src="../../static/icon/delet.png" mode=""></image> -->
					</view>
					<view class="dis_f_l_c b_btn">
						<view class="dis_f_l_c" style="margin-right: 60rpx;" @click.stop="go_lt(item.user.id)" v-if="item.uid != uid">
							<image  src="../../static/guang_chang/sl.png" mode=""></image>
							<view style="color: #7ADEEC;">私聊</view>
						</view>
						<view class="dis_f_l_c" style="margin-right: 60rpx;">
							<image  src="../../static/index/s_btn2.png" mode=""></image>
							<view>{{item.talknum}}</view>
						</view>
						<view class="dis_f_l_c" style="margin-right: 60rpx;" @click.stop="love(item.id,index)">
							<image v-if="item.zans == 1" src="../../static/index/hx.png" mode=""></image>
							<image v-else src="../../static/index/s_btn4.png" mode=""></image>
							<view>{{item.zan}}</view>
						</view>
					</view>
				</view>
				<view style="padding-bottom: 100rpx;" v-if="quan !=''">
					<u-loadmore :status="status"/>
				</view>
			</view>
			<view v-else class="dis_f_co news">				<!-- <view class="n_top dis_f_l_c">					<view class="t_btn dis_f_c_c">私聊 1</view>					<view class="t_btn dis_f_c_c">点赞 15</view>					<view class="t_btn dis_f_c_c">评论 20</view>				</view> -->
				<view >
					
					<view class="n_bottom dis_f" v-for="(item,index) in userAddConversationList" :key="index" @click="go_lt(info[index].id)">
						<view class="tx">
							
							<image class="tx_img" :src="info[index].avatar" mode=""></image>
							<image class="sex" :src="info[index].sex" mode=""></image>
						</view>
						<view class="dis_f_co" style="width: calc( 100% - 148rpx);">
							<view class="dis_f_sb_c" style="width: 100%;margin-bottom: 6rpx;">
								<view>{{info[index].name}}</view> 
								 <view class="h_text">{{info[index].time}}</view>
							</view>
							<view class="dis_f_sb_c" style="width: 100%;">
								<view class="h_text"><rich-text :nodes="nodesFliter(item.conversation.lastMessage.payload.text)"></rich-text></view>
								 <!-- <view class="num">新消息</view> -->
							</view>
						</view>
					</view>
				</view>							</view>
		</view>
	</view>
	</view>
	</view>
</template>

<script>
	import {
	  mapState
	 } from "vuex";
	export default {
		data() {
			return {
				list: [{
					name: '关注'
				}, {
					name: '推荐'
				}, 
				{
					name: '附近'
				},
				{
					name: '消息'
				}],
				current: 1,
				tabstyle:{
					'font-size':'34rpx'
				},
				search_text:'',
				sex_src:'',
				quan:[],
				part:true,
				userAddConversationList:[],
				uid:0,
				page:1,
				zys:'',
				status:'loadmore',
				previewVideoSrc:'',
				info:[],
			};
		},
		computed: {
		   ...mapState({
		    isLogin: state => state.isLogin,
		    isSDKReady: state => state.isSDKReady,
		    conversationList: state => state.conversationList,
		   })
		  },
			watch: {
				isSDKReady(val) {
					//isSDKReady == true 请求会话列表
					if (val) {
						this.getConversationList()
					}
				},
				conversationList(val){
					this.getUserInfo(val)
				}
		    },
		
		onLoad() {
			this.uid = uni.getStorageSync('uid')
			this.page = 1;
			this.quan = [];
			this.getquan()
			// this.getquan()
			this.get_userinfo();
		},
		onShow() {
			// this.page = 1;
			// this.quan = [];
			// this.getquan()
			console.log(this.isSDKReady)
			if (this.isSDKReady) {
			 console.log('2222')
			 this.getConversationList()
			}else{
			 console.log('333333')
			}
			
		},
		methods:{
			nodesFliter(str) {
				let nodeStr = '<div style="align-items: center;word-wrap:break-word;">' + str + '</div>'
				return nodeStr
			},
			previewVideo(src) {
				this.previewVideoSrc = src;
				// this.previewVideoSrc =
				// 	'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-fbd63a76-dc76-485c-b711-f79f2986daeb/ba804d82-860b-4d1a-a706-5a4c8ce137c3.mp4'
			},
			previewVideoClose() {
				this.previewVideoSrc = ''
				console.log('previewVideoClose', this.previewVideoSrc)
			},
			//获取消息列表
			getConversationList() {
				// 拉取会话列表
				// console.log(111)
				let promise = this.tim.getConversationList();
				promise.then((res) => {
					let conversationList = res.data.conversationList; // 会话列表，用该列表覆盖原有的会话列表
					if (conversationList.length) {
						//将返回的会话列表拼接上 用户的基本资料  
						//说明：如果已经将用户信息 提交到tim服务端了 就不需要再次拼接
						this.$store.commit("updateConversationList", conversationList);
						
					}
			
				}).catch((err) => {
					console.warn('getConversationList error:', err); // 获取会话列表失败的相关信息
				});
			},
			//根据消息列表请求聊天对象的用户信息 并完成数据拼接
			getUserInfo(conversationList) {
				var that = this
				 this.userAddConversationList = []
				 // console.log(conversationList)
				 this.info = []
				 console.log(1111)
				conversationList.forEach(item => {
					let obj = {}
					obj.conversation = item
					that.$.ajax(2,"POST","index/friend/friend_user_info",{
						id:item.conversationID,
						time:item.lastMessage.lastTime
					},(res)=>{
						if(res.data.sex =='男'){
							res.data.sex = '../../static/mine/man.png'
							
						}
						if(res.data.sex =='女'){
							res.data.sex = '../../static/mine/women.png'
						}
						that.info.push(res.data)
					})
					this.userAddConversationList.push(JSON.parse(JSON.stringify(obj)))
				})
				console.log(that.info)
				console.log(64546546)
				 // console.log(this.userAddConversationList)
				 console.log(64546546)
			},
			toRoom(item) {
				this.$store.commit('updateConversationActive', item)
				uni.navigateTo({
					url: './room'
				})
			},
			serch(){
					this.$.ajax(1, 'post', 'index/checktokens', {
						uid:uni.getStorageSync('uid'),
						token:uni.getStorageSync('token')
					}, (res) => {
						console.log(res)
						if(res.code == 9){
							this.$.ti_shi('token已过期，请重新登陆')
						uni.clearStorageSync()
							setTimeout( () => {
								uni.navigateTo({
									url:'/pages/login/login'
								})
							}, 1000)
						return;
						}
						else{
								this.getquan()
						}
					})
					
			
				
			},
			go_lt(e){
			    let  toUserInfo = {
			     userId:''
			    }
			    toUserInfo.userId = e
				console.log(toUserInfo.userId)
			    // this.$store.commit('createConversationActive', e)
			    this.$store.commit('createConversationActive', toUserInfo.userId)
			    console.log(this.$store.state.conversationActive)
			    uni.navigateTo({
			     url: './chat'
			    })
			   },
			getquan(e){
				console.log(e)
					this.$.ajax(1, 'post', 'index/getquan', {
						uid:uni.getStorageSync('uid'),
						token:uni.getStorageSync('token'),
						cate:this.current,
						keyword:this.search_text,
						page:this.page,
						city:e
					}, (res) => {
						if(res.code == 1){
							this.zys = res.pagecount
							res.list.forEach((item,index)=>{
								this.quan.push(item);
							})
						}else{
							
						}
					})
				
				
			},
			love(e,index){
				this.$.ajax(1, 'post', 'index/checktokens', {
					uid:uni.getStorageSync('uid'),
					token:uni.getStorageSync('token')
				}, (res) => {
					console.log(res)
					if(res.code == 9){
						this.$.ti_shi('token已过期，请重新登陆')
					uni.clearStorageSync()
						setTimeout( () => {
							uni.navigateTo({
								url:'/pages/login/login'
							})
						}, 1000)
					return;
					}
					else{
							this.$.ajax(1, 'post', 'index/setquanlove', {
								uid:uni.getStorageSync('uid'),
								token:uni.getStorageSync('token'),
								id:e
							}, (res) => {
								console.log(res)
								if(res.code == 1){
									this.quan[index].zan = this.quan[index].zan+1
									this.quan[index].zans = 1
								}else{
									this.quan[index].zan = this.quan[index].zan-1
									this.quan[index].zans = 0
								}
							})
					}
				})
			
			},
			go_xq(e){
				this.$.ajax(1, 'post', 'index/checktokens', {
					uid:uni.getStorageSync('uid'),
					token:uni.getStorageSync('token')
				}, (res) => {
					console.log(res)
					if(res.code == 9){
						this.$.ti_shi('token已过期，请重新登陆')
					uni.clearStorageSync()
						setTimeout( () => {
							uni.navigateTo({
								url:'/pages/login/login'
							})
						}, 1000)
					return;
					}
					else{
							this.$.open('/pages/guang_chang/dt_xq?id='+e)
					}
				})
				
			},
			gofabu(){
				this.$.ajax(1, 'post', 'index/checktokens', {
					uid:uni.getStorageSync('uid'),
					token:uni.getStorageSync('token')
				}, (res) => {
					console.log(res)
					if(res.code == 9){
						this.$.ti_shi('token已过期，请重新登陆')
					uni.clearStorageSync()
						setTimeout( () => {
							uni.navigateTo({
								url:'/pages/login/login'
							})
						}, 1000)
					return;
					}
					else{
					this.$.open('/pages/guang_chang/fb')
					}
				})
				
			},
			change(index) {
				this.current = index;
				this.quan = [];
				    if(index == 0){
				     this.part = true
				     this.getquan(0)
				    }
				    if(index == 1){
				     this.part = true
				     this.getquan(0)
				    }
				    if(index == 2){
				     this.part = true
					 var city = uni.getStorageSync('city')
					 this.getquan(city)
				    }
					if(index == 3){
					 this.part = false
					  // this.getquan()
					}
			},
			look_img(img,e){
				this.$.look_img(img,e)
			},
			get_userinfo(){
				let sex = 1
				
			},
		},
		onReachBottom() {
			// var xiabiao = this.current;
			if(this.page+1 <= this.zys){
				this.status = 'loading';
				this.page = ++this.page;
				console.log(this.page)
				this.getquan();
			}else{
				this.status = 'nomore';
				return;
			}
		},
		onPullDownRefresh(){
			console.log(111)
			this.$.ajax(1, 'post', 'index/getquan', {
				uid:uni.getStorageSync('uid'),
				token:uni.getStorageSync('token'),
				cate:this.current,
				keyword:this.search_text,
				page:1,
			}, (res) => {
				if(res.code == 1){
					this.zys = res.pagecount
					this.quan = res.list
				}else{
					
				}
			})
			
			setTimeout(function () {
			
			    uni.stopPullDownRefresh();
			}, 1000);
		},
	}
</script>

<style lang="scss">
	.preview-full {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		z-index: 10020;
	}
	
	.preview-full video {
		width: 100%;
		height: 100%;
		z-index: 1002;
	}
	
	.preview-full-close {
		position: fixed;
		right: 32rpx;
		top: 100rpx;
		width: 80rpx;
		height: 80rpx;
		line-height: 60rpx;
		text-align: center;
		z-index: 1004;
		/* 	background-color: #808080; */
		color: #fff;
		font-size: 65rpx;
		font-weight: bold;
		// text-shadow: 1px 2px 5px rgb(0 0 0);
	}
	.dz_btn{
		// width: 166rpx;
		// height: 56rpx;
		// background-color: #fff;
		// border-radius: 30rpx;
		font-size: 22rpx;
		line-height: 32rpx;
		color: #7ADEEC;
		margin-bottom: 12rpx;
		.left{
			width: 18.45rpx;
			height: 25.5rpx;
			margin-right: 12rpx;
		}
		.right{
			width: 15.95rpx;
			height: 15.95rpx;
		}
	}
	.topbar{
		position: fixed;
		z-index: 9999;
		width: 100%;
		.dhl {
			height: var(--status-bar-height);
			background-color: #7ADEEC;
		}
		.tab{
			width: 100%;
			height: 88rpx;
			background-color: #7ADEEC;
		}
		.xfj{
			width: 33.79rpx;
			height: 31.74rpx;
			position: fixed;
			top: calc(var(--status-bar-height) + 24rpx);
			right: 48rpx;
		}
		.s_banxin {
			width: 100%;
			padding: 0 48rpx;
			background-color: #7ADEEC;
			height: 88rpx;
			.search {
				width: 100%;
				background-color: #fff;
				border-radius: 30rpx;
				padding: 14rpx 0 14rpx 30rpx;
				height: 60rpx;
		
				image {
					width: 30rpx;
					height: 30rpx;
					margin-right: 12rpx;
				}
			}
		
		}
	}
	.content{
		width: 100%;
		padding: calc(var(--status-bar-height) + 212rpx) 24rpx 0 24rpx;
		
		.dt_xq{
			width: 100%;
			padding: 36rpx 24rpx;
			background-color: #fff;
			margin-bottom: 12rpx;
			border-radius: 20rpx;
			box-shadow: 0rpx 6rpx 24rpx rgba(34, 34, 34, 0.05);
			.tx{
				width: 76rpx;
				height: 76rpx;
				margin-right: 24rpx;
				position: relative;
				.tx_img{
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
				.sex{
					position: absolute;
					bottom: 0;
					right: 0;
					width: 30rpx;
					height: 30rpx;
				}
			}
			.img_list{
				width: 100%;
				margin-bottom: 12rpx;
				image{
					width: 204rpx;
					height: 204rpx;
					border-radius: 10rpx;
					margin-bottom: 10rpx;
					margin-right: 12rpx;
				}
			}
			.title{
				font-size: 28rpx;
				line-height: 40rpx;
				margin-bottom: 6rpx;
			}
			.sign{
				font-size: 22rpx;
				color: #BBB;
			}
			.b_btn{
				font-size: 22rpx;
				line-height: 32rpx;
				color: #777;
				image{
					margin-right: 12rpx;
					width: 37.13rpx;
					height: 32.88rpx;
				}
			}
		}
		.news{
			width: 100%;
			.n_top{
				width: 100%;
				margin-bottom: 36rpx;
				.t_btn{
					font-size: 22rpx;
					line-height: 32rpx;
					margin-right: 36rpx;
					color: #bbb;
					width: 114rpx;
					height: 52rpx;
					border-radius: 26rpx;
					border: 2rpx solid #BBBBBB;
				}
			}
			.n_bottom{
				width: 100%;
				padding: 36rpx 24rpx;
				border-radius: 20rpx;
				background-color: #fff;
				box-shadow: 0rpx 6rpx 24rpx rgba(34, 34, 34, 0.05);
				margin-bottom: 12rpx;
				.tx{
					width: 76rpx;
					height: 76rpx;
					margin-right: 24rpx;
					position: relative;
					.tx_img{
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
					.sex{
						position: absolute;
						bottom: 0;
						right: 0;
						width: 30rpx;
						height: 30rpx;
					}
				}
				.h_text{
					font-size: 22rpx;
					line-height: 32rpx;
					color: #BBBBBB;
				}
				.num{
					padding: 2rpx 18rpx;
					font-size: 18rpx;
					// line-height: 26rpx;
					background-color: #E23C63;
					color: #fff;
					border-radius: 14rpx;
				}
			}
		}
	}
</style>
